<!--
 * @Author: Smthie Smthie@qq.com
 * @Date: 2024-05-28 11:38:08
 * @LastEditors: Smthie Smthie@qq.com
 * @LastEditTime: 2024-05-30 15:29:32
 * @FilePath: \ProtocolTool\src\renderer\src\views\Manual\Socket\GetAttribute.vue
-->
<script lang="ts" setup>
import { ref } from 'vue'
import { message } from 'ant-design-vue'
import Status from '@/components/TestStatus/index.vue'
import { CloudSyncOutlined } from '@ant-design/icons-vue'
import TextDataBox from '@/components/TextDataBox/index.vue'
import { socketGetAttributeAPI } from '@/api/Manual'

const props = defineProps({
  device: String
})
const status = ref('')
const loading = ref(false)
const list = ref<any>([])

const handler = () => {
  if (!props.device) {
    message.error('请选择设备')
    return
  }
  loading.value = true
  status.value = ''
  socketGetAttributeAPI({ clientId: props.device })
    .then((res) => {
      status.value = res.data.resultStatus === 200 ? 'success' : 'fail'
      list.value.unshift({
        id: list.value.length ? list.value[0].id + 1 : 1,
        itemId: res.data.itemId,
        time: Date.now(),
        data: res.data.responseData ? res.data.responseData.replaceAll('\n', '<br/>') : 'null',
        requestData: res.data.requestData ? res.data.requestData.replaceAll('\n', '<br/>') : 'null',
        msg: res.data.result,
        resultStatus: res.data.resultStatus
      })
    })
    .finally(() => {
      loading.value = false
    })
}
</script>
<template>
  <div>
    <div>
      <div class="title">获取属性信息</div>
      <div class="desc">
        通过指令的方式获取地球物理专用设备的属性信息，包括信息长度、设备名称、设备型号、生产厂家名称、生产厂家通信地址、生产日期、联系方式、设备软件版本号等。
      </div>
    </div>

    <div class="content">
      <div class="live-data-card">
        <div class="header">
          <div class="result">
            <div class="result-title">测试结果</div>
            <div class="result-value">
              <Status :status />
            </div>
          </div>
          <a-button type="primary" block style="width: 180px" :loading @click="handler">
            <template #icon>
              <CloudSyncOutlined />
            </template>
            获取
          </a-button>
        </div>
        <div class="main">
          <div class="data-box" style="height: 370px">
            <TextDataBox :list />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="less" scoped>
.title {
  font-weight: 500;
  font-size: 18px;
  color: rgba(0, 0, 0, 0.88);
  line-height: 28px;
}

.desc {
  font-weight: 400;
  font-size: 14px;
  color: #909399;
  line-height: 22px;
  margin: 6px 0 16px;
}

.content {
  .live-data-card {
    background: #fff;
    border-radius: 4px;

    .header {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      .result {
        display: flex;
        align-items: center;
        margin-right: 20px;

        &-title {
          font-weight: 600;
          font-size: 16px;
          margin-right: 10px;
        }

        &-value {
          width: 90px;
          height: 28px;
        }
      }
      .title {
        font-weight: 500;
        font-size: 14px;
        color: rgba(0, 0, 0, 0.85);
        line-height: 24px;
        margin-right: 16px;
      }
    }
  }
}
.ant-btn-primary {
  background-color: rgb(0, 185, 107);
}
.ant-btn-primary:not(:disabled):hover {
  color: #fff;
  background-color: #139937;
}
.ant-btn-default:not(:disabled):hover {
  color: #1a8c35;
  border-color: #139937;
}
</style>
